﻿@page "/write"
@namespace SwashbucklerDiary.Rcl.Pages
@inherits ImportantComponentBase

@if (enableMarkdown && IsThisPage)
{
    <link href="@cssHref" rel="stylesheet" />
}

<MyAppBar>
    <MButton Icon="true"
             OnClick="NavigateToBack">
        <MIcon>
            mdi-arrow-left
        </MIcon>
    </MButton>

    <MSpacer></MSpacer>

    <MButtonExtension Icon="true"
                      OnMousedownPreventDefault="true"
                      OnClick="InsertTimestamp">
        <MIcon>
            mdi-clock-outline
        </MIcon>
    </MButtonExtension>

    <MButton Icon="true"
             OnClick="()=>showSelectTag = true">
        <MIcon>
            mdi-label-outline
        </MIcon>
    </MButton>

    <MultiMenu @bind-Visible="showMenu"
               DynamicListItems="menuItems">
        <ActivatorContent>
            <MButton @attributes="@context.Attrs"
                     Icon="true">
                <MultiDisplay>
                    <DesktopContent>
                        <MIcon>mdi-dots-horizontal</MIcon>
                    </DesktopContent>
                    <MobileContent>
                        <MIcon>mdi-dots-vertical</MIcon>
                    </MobileContent>
                </MultiDisplay>
            </MButton>
        </ActivatorContent>
    </MultiMenu>
</MyAppBar>

<ScrollContainer ContentClass="d-flex flex-column"
                 ContentStyle="height:100%;padding-top:0px;">
    <div>
        <div class="d-flex align-center px-3">
            <button class="d-flex align-center text-h6 font-weight-bold" @onclick="()=>showCreateTime=true">
                @(diary.CreateTime.ToString("d"))
                <MIcon Size="20"
                       Right>
                    mdi-pencil-outline
                </MIcon>
            </button>

            <span class="ml-5 text-subtitle-2">
                @(I18n.ToWeek(diary.CreateTime))
            </span>

            <MSpacer></MSpacer>

            <span class="text-subtitle-2">
                @(CounterValue())
            </span>
        </div>
        <div>
            <DiaryInfoButton Icon="@WeatherIcon"
                             Text="@WeatherText"
                             OnClick="()=>showWeather=true">
            </DiaryInfoButton>
            
            <DiaryInfoButton Icon="@MoodIcon"
                             Text="@MoodText"
                             OnClick="()=>showMood=true">
            </DiaryInfoButton>

            <DiaryInfoButton Icon="mdi-map-marker-outline"
                             Text="@LocationText"
                             OnClick="()=>showLocation=true">
            </DiaryInfoButton>
        </div>
    </div>

    @if (enableTitle)
    {
        <MTextField @bind-Value="diary.Title"
                    Class="pb-0 mb-sm-4 user-select font-weight-bold flex-grow-0 rounded-lg"
                    Solo="true"
                    Flat="true"
                    TValue="string"
                    BackgroundColor="transparent"
                    HideDetails="@("auto")"
                    Dense="true"
                    spellcheck="false"
                    maxlength="50"
                    Placeholder="@(I18n.T("Write.TitlePlace"))">
        </MTextField>
    }

    <div class="write-input-wrap mb-sm-3">
        @if (enableMarkdown)
        {
            <MarkdownEdit @ref="markdownEdit"
                          @bind-Value="diary.Content"
                          WrapClass="write-markdown-wrap"
                          Class="px-3 rounded-lg write-markdown">
            </MarkdownEdit>
        }
        else
        {
            <TextareaEdit @ref="textareaEdit"
                          @bind-Value="diary.Content"
                          Class="rounded-lg">
            </TextareaEdit>
        }
    </div>

    <div class="mb-sm-5 @(SelectedTags.Any()?"":"d-none")">
        <div class="write-chip-group" style="width:100%;">
            @foreach (var item in SelectedTags)
            {
                <MChip @key="item.Id"
                       Close="true"
                       Outlined="true"
                       OnCloseClick="()=>RemoveSelectedTag(item)">
                    @(item.Name)
                </MChip>
            }
        </div>
    </div>

    @if (enableMarkdown)
    {
        <div class="vditor-toolbar-help"></div>
    }


</ScrollContainer>

<SelectTagsDialog @bind-Visible="showSelectTag"
                  @bind-Value="SelectedTags"
                  @bind-Items="tags"
                  OnSave="SaveSelectTags">
</SelectTagsDialog>

<SelectDialog @bind-Visible="showWeather"
              @bind-Value="@SelectedWeather"
              Title="@(I18n.T("Write.SelectWeather"))"
              Items="weatherIcons"
              ItemValue="it=>it.Key"
              ItemText="@(item=>I18n.T("Weather." + item.Key))"
              ItemIcon="it=>it.Value">
</SelectDialog>

<SelectDialog @bind-Visible="showMood"
              @bind-Value="@SelectedMood"
              Title="@(I18n.T("Write.SelectMood"))"
              Items="moodIcons"
              ItemValue="it=>it.Key"
              ItemText="@(item=>I18n.T("Mood." + item.Key))"
              ItemIcon="it=>it.Value">
</SelectDialog>

<SelectLocationDialog @bind-Visible="showLocation"
                      @bind-Value="SelectedLocation">
</SelectLocationDialog>

<MultiDatePicker @bind-Visible="showCreateTime"
                 @bind-Value="SelectedDate">
</MultiDatePicker>

<MOverlay Value="overlay"
          Opacity="0">
</MOverlay>